<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
    <style>
        .ftitle {
            font-size: 14px;
            font-weight: bold;
            color: #666;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }
        .fitem {
            margin-bottom: 5px;
        }
        .fitem label {
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
    <p>普通gird</p>
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
           url="/user/list2"
           toolbar="#toolbar"
           rownumbers="true" fitColumns="true" singleSelect="false"
    >
        <thead>
        <tr>
            <th field="id" width="50">id</th>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="alertRow()">弹出所选行信息</a>
    </div>
    <script>
        function alertRow() {
            //选中单行
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                alert('选中单行 ID:' + row.id + "\nfirstname:" + row.firstname);
            }

            //允许选中多行
            var ids = [];
            var rows = $('#dg').datagrid('getSelections');
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].id);
            }
            alert('选中多行 ' + ids.join('，'));
        }
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建复杂的表格工具</p>
    <table id="dg2" title="My Users" class="easyui-datagrid" style="width:550px;height:300px"
           url="/user/list"
           toolbar="#toolbar2"
           rownumbers="true" fitColumns="true" singleSelect="true"
    >
        <thead>
        <tr>
            <th field="id" width="50">id</th>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar2" style="padding:3px">
        <div>
            <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
            <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
            <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
        </div>
        <div>
            <span>ID:</span>
            <input id="id2" style="line-height:26px;border:1px solid #ccc">
            <span>firstname:</span>
            <input id="firstname2" style="line-height:26px;border:1px solid #ccc">
            <a href="javascript:;" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
        </div>
    </div>
    <!--新增表单-->
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
         closed="true" buttons="#dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post">
            <div class="fitem">
                <label>First Name:</label>
                <input name="firstname" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Last Name:</label>
                <input name="lastname" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Phone:</label>
                <input name="phone">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="email" class="easyui-validatebox" validType="email">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
    <script>
        function doSearch() {
            $('#dg2').datagrid('load', {
                id: $('#id2').val(),
                firstname: $('#firstname2').val()
            });
        }
        var url;
        /**
         * 打开新增用户的form
         */
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','New User');
            $('#fm').form('clear');
            url = '/user/save';
        }

        /**
         * 保存用户
         */
        function saveUser(){
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#dlg').dialog('close');		// close the dialog
                        $('#dg2').datagrid('reload');	// reload the user data
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }

        /**
         * 打开更新form
         */
        function editUser(){
            var row = $('#dg2').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','Edit User');
                $('#fm').form('load',row);
                url = '/user/save?id='+row.id;
            }
        }

        /**
         * 删除用户
         */
        function removeUser(){
            var row = $('#dg2').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
                    if (r){
                        $.post('/user/remove',{id:row.id},function(result){
                            if (result.success){
                                $('#dg2').datagrid('reload');	// reload the user data
                            } else {
                                $.messager.show({	// show error message
                                    title: 'Error',
                                    msg: result.msg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
    </script>



    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>格式化列</p>
    <table id="dg3" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th field="id" width="10%">id</th>
            <th field="firstname" width="15%">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%" formatter="formatPhone">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="create_time" width="15%"  formatter="formatTime">createTime</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>
    <script>
        function formatPhone(val,row){
            if (val.length < 11){
                return '<span style="color:red;">'+val+'</span>';
            } else {
                return val;
            }
        }

        /**
         *
         * @param val 当前单元格值
         * @param row 当前行
         * @param index 当前行索引
         */
        function formatTime(val, row,index) {
            if(val){
                var date = new Date(val);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            }else {
                return "";
            }
        }
    </script>


    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>排序</p>
    <table id="dg4" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true">id</th>
            <th field="firstname" width="15%">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%" formatter="formatPhone">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="create_time" width="15%"  formatter="formatTime">createTime</th>
            <th field="update_time" width="15%"  formatter="formatTime" sortable="true">updateTime</th>
        </tr>
        </thead>
    </table>


    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建列组合</p>
    <table id="dg5" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th rowspan="2" field="id" width="10%" sortable="true">id</th>
            <th rowspan="2" field="firstname" width="15%">First Name</th>
            <th rowspan="2" field="lastname" width="15%">Last Name</th>
            <th rowspan="2" field="phone" width="15%" formatter="formatPhone">Phone</th>
            <th rowspan="2" field="email" width="15%">Email</th>
            <th colspan="2" width="15%">time</th>
        </tr>
        <tr>
            <th field="create_time" width="15%"  formatter="formatTime">createTime</th>
            <th field="update_time" width="15%"  formatter="formatTime" sortable="true">updateTime</th>
        </tr>
        </thead>
    </table>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>添加复选框</p>
    <table id="dg6" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           toolbar="#toolbar6"
           rownumbers="true" fitColumns="true" singleSelect="false">
        <thead>
        <tr>
            <th field="ck" width="5%" checkbox="true"></th>
            <th field="id" width="5%" sortable="true">id</th>
            <th field="firstname" width="15%">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="create_time" width="15%"  formatter="formatTime">createTime</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar6" style="padding:3px">
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser6()">Remove User</a>
    </div>
    <script>
        function removeUser6() {
            var row = $('#dg6').datagrid('getSelections');
            console.log(row);
        }
    </script>


    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>自定义分页</p>
    <table id="dg7" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           pagination="true"
           rownumbers="true" fitColumns="true" singleSelect="false">
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true">id</th>
            <th field="firstname" width="15%">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="create_time" width="15%"  formatter="formatTime">createTime</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>
    <script>
        $(function () {
            var pager = $('#dg7').datagrid('getPager');    // get the pager of datagrid
            pager.pagination({
                showPageList:false,
                buttons:[{
                    iconCls:'icon-search',
                    handler:function(){
                        alert('search');
                    }
                },{
                    iconCls:'icon-add',
                    handler:function(){
                        alert('add');
                    }
                },{
                    iconCls:'icon-edit',
                    handler:function(){
                        alert('edit');
                    }
                }],
                onBeforeRefresh:function(){
                    alert('before refresh');
                    return true;
                },
                displayMsg: " 一共 {total} 条数据，展示 {from} 到 {to} 条"
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>自定义视图</p>
    <table id="dg8" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           pagination="true"
           rownumbers="true" fitColumns="true" singleSelect="false">
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true" style="display: none">id</th>
            <th field="firstname" width="15%" style="display: none">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>
    <script>
        var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
            renderRow: function(target, fields, frozen, rowIndex, rowData){
                var cc = [];
                cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
                if (!frozen){
                    cc.push('<img src="/images/2.jpg" style="width:150px;float:left">');
                    cc.push('<div style="float:left;margin-left:20px;">');
                    for(var i=0; i<fields.length; i++){
                        var copts = $(target).datagrid('getColumnOption', fields[i]);
                        cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
                    }
                    cc.push('</div>');
                }
                cc.push('</td>');
                return cc.join('');
            }
        });
        $(function () {
            $('#dg8').datagrid({
                view: cardview
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>页脚摘要（算总价的时候好使吧）</p>
    <table id="dg9" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list2"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true"
           showFooter="true"
    >
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true" style="display: none">id</th>
            <th field="firstname" width="15%" style="display: none">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>根据条件设置行颜色</p>
    <table id="dg10" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true"
    >
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true" style="display: none">id</th>
            <th field="firstname" width="15%" style="display: none">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>
    <script>
        $(function () {
            $('#dg10').datagrid({
                rowStyler:function(index,row){
                    if (row.phone.length<11){
                        return 'background-color:pink;color:blue;font-weight:bold;';
                    }
                }
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>分页详情</p>
    <table id="dg11" title="My Users" class="easyui-datagrid" style="width:100%;height:300px"
           url="/user/list2"
           rownumbers="true"
           fitColumns="true"
           singleSelect="true"
           pagination="true"
           data-options="pageSize:5,pageList:[5,15,30]"
    >
        <thead>
        <tr>
            <th field="id" width="10%" sortable="true" style="display: none">id</th>
            <th field="firstname" width="15%" style="display: none">First Name</th>
            <th field="lastname" width="15%">Last Name</th>
            <th field="phone" width="15%">Phone</th>
            <th field="email" width="15%">Email</th>
            <th field="update_time" width="15%"  formatter="formatTime">updateTime</th>
        </tr>
        </thead>
    </table>


</body>

</html>